<template>
  <div class="energy-use-view">
    <div class="header">
      <div class="header-left">
        <div>
          <el-date-picker size="large" value-format="YYYY-MM"  v-model="store.state.totalCount.month"
                          default-value="new Date()" type="month" placeholder="请选择时间" />
        </div>
        <div>
          <el-select v-model="province" @change="customer = companyList[0]?.id" class="m-2" placeholder="选择城市" size="large">
<!--            <el-option v-for="item in store.state.areaList" :key="item.name" :label="item.name" :value="item.id" />-->
              <el-option
                  v-for="item in $store.state.areaList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id"
              />
          </el-select>
        </div>
        <div>
          <el-select v-model="customer" class="m-2" placeholder="选择公司"
            size="large">
            <el-option v-for="item in companyList" :key="item.title" :label="item.title" :value="item.id" />
          </el-select>
        </div>
      </div>
      <div class="header-right">
        <el-radio-group v-model="radio1" @change="select2 = select2List[0].value" size="large">
          <el-radio-button v-for="item in store.state.analogList" :key="item.value" :label="item.value" label="jbcs">{{ item.label }}</el-radio-button>
        </el-radio-group>
      </div>
      <div style="clear: both"></div>
    </div>
    <div>
      <div class="item">
        <frame-block title="">
          <div class="header item_header">
            <div class="header-left">
              <div>
                <el-select v-model="select2" class="m-2" placeholder="请选择">
                  <el-option v-for="item in select2List" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </div>
            <div class="header-right">
              <el-radio-group v-model="radio2">
                <el-radio-button label="jr">今日</el-radio-button>
                <el-radio-button label="bz">本周</el-radio-button>
                <el-radio-button label="sz">上周</el-radio-button>
                <el-radio-button label="by">本月</el-radio-button>
                <el-radio-button label="sy">上月</el-radio-button>
              </el-radio-group>
            </div>
            <div style="clear: both"></div>
          </div>
          <div class="mrdl">
            <lineAndbarEcharts id="byqfzl" :tableFrom="{ customer, province, timeValue, select2, radio1, radio2 }"
              :key="captchaTime" type="line" toolbox valueType="ssjc" />
          </div>
        </frame-block>
      </div>
      <div class="item">
        <div class="mrdl">
          <div class="table">
            <p class="table_header">
              <span>详细数据</span>
              <span>{{ store.state.ddidListTime.firstDateTime }}～{{ store.state.ddidListTime.lastDateTime }}</span>
            </p>
            <el-table :data="$store.state.ddidList" style="width: 100%" :row-class-name="tableRowClassName">
              <el-table-column prop="title" label="监测因子" />
              <el-table-column prop="realTimeValue" label="实时值" />
              <el-table-column prop="maxValue" label="最大值" />
              <el-table-column prop="maxTime" label="最大值时间" />
              <el-table-column prop="minValue" label="最小值" />
              <el-table-column prop="minTime" label="最小值时间" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <br />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, computed, watch } from 'vue'
import { useStore } from 'vuex'
import router from '@/router'
import axios from '@/utils/axios'
const store = useStore()
store.state.pageName = "realtimemonitor"

const customer = ref(store.state.customer)
const province = ref(store.state.province)
const timeValue = ref(store.state.totalCount.month)
const select2 = ref('yggl')
const radio1 = ref('jbcs')
const radio2 = ref('jr')
const radio3 = ref('y')

const captchaTime = ref(0)
const getLocalTime = () => {
  captchaTime.value = Date.now()
}

onMounted(() => {

})

watch(
    () => store.state.province,
    () => {
      province.value = store.state.province
      customer.value = store.state.customer

      let customerObj = store.state.companyList.filter((e) => e.id == store.state.customer)[0]
      if (customerObj) {
        if (customerObj.provinceId) {
          province.value = customerObj.provinceId
        }
      }
    },
    { immediate: true }
)
watch(customer, () => {
  store.dispatch('setCustomer', customer.value)
})

watch([customer, province, () => store.state.totalCount.month, select2, radio1, radio2, () => store.state.leftTreeId], (val) => {

  nextTick(() => {
    getLocalTime()
  })
})

const companyList = computed(function () {
  if (province.value == 0) {
    return store.state.companyList
  } else if (province.value) {
    return store.state.companyList.filter((e) => e.provinceId == province.value)
  } else {
    return store.state.companyList
  }
})

const select2List = computed(function () {
  let analog = store.state.analogList.filter(e => e.value == radio1.value)[0]
  return analog ? analog.analog : []
})

</script>

<style lang="scss" scoped>
.table {
  width: 1558px;
  padding: 0 8px;
}

.table_header {
  display: flex;
  justify-content: space-between;

  font-size: 14px;
  color: #fcf8f8;
  padding: 10px 0;
}

.mrdl {
  width: 1540px;
  height: 500px;
}

.dfjg {
  width: 1020px;
}

.dljg {
  width: 500px;
  height: 460px;
}

.byyd {
  width: 500px;
  padding: 40px 40px 0 35px;

  &>div {
    margin-bottom: 40px;
    display: flex;
    align-items: center;

    div:nth-child(2) {
      flex-grow: 1;
      height: 90px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      p {
        display: flex;
        justify-content: space-between;
      }

      img {
        width: 16px;
      }
    }

    &>img {
      width: 106px;
      margin-right: 10px;
      height: 98px;
    }
  }
}

.energy-use-view {
  padding-top: 25px;
  font-size: 18px;
  color: #fcf8f8;
  width: 100%;

  .item {
    display: inline-block;
  }
}

.header {
  padding: 0 22px 0 12px;
}

.header-right {
  float: right;
}

.header-left {
  float: left;

  &>div {
    display: inline-block;
    margin-right: 20px;
  }
}

.item_header {
  padding: 10px;
}
</style>